<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版提词器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 控制面板 -->
        <div class="control-panel" id="controlPanel">
            <div class="panel-section">
                <h3>文本输入</h3>
                <textarea id="textInput" placeholder="请输入您的提词内容..." rows="6">欢迎使用网页版提词器！这是一个专业的提词工具，可以帮助您更流畅地进行演讲和视频录制。

点击"格式化文本"按钮开始使用，然后点击"开始"按钮启动自动滚动。您可以使用空格键暂停/继续，R键重置，F键切换全屏模式。

祝您使用愉快！</textarea>
                <button id="formatText">显示文本</button>
            </div>
            
            <div class="panel-section">
                <h3>滚动控制</h3>
                <div class="control-group">
                    <label for="scrollSpeed">滚动速度:</label>
                    <input type="range" id="scrollSpeed" min="0.1" max="200" step="0.1" value="50">
                    <span id="speedValue">50</span>
                </div>
                <div class="control-buttons">
                    <button id="startScroll">开始</button>
                    <button id="pauseScroll">暂停</button>
                    <button id="resetScroll">重置</button>
                </div>
            </div>
            
            <div class="panel-section">
                <h3>显示设置</h3>
                <div class="control-group">
                    <label for="fontSize">字体大小:</label>
                    <input type="range" id="fontSize" min="16" max="72" value="32">
                    <span id="fontSizeValue">32px</span>
                </div>
                <div class="control-group">
                    <label for="lineHeight">行间距：</label>
                    <input type="range" id="lineHeight" min="1" max="3" step="0.1" value="1.8">
                    <span id="lineHeightValue">1.8</span>
                </div>
                <div class="control-group">
                    <label for="textColor">文字颜色:</label>
                    <input type="color" id="textColor" value="#ffffff">
                </div>
                <div class="control-group">
                    <label for="bgColor">背景颜色:</label>
                    <input type="color" id="bgColor" value="#000000">
                </div>
                <div class="control-group">
                    <label for="mirrorText">横向镜像:</label>
                    <input type="checkbox" id="mirrorText">
                    <span style="min-width: auto; font-size: 12px;">镜像</span>
                </div>
            </div>
            
            <div class="panel-section">
                <div class="advanced-header" style="display: flex; justify-content: space-between; align-items: center; cursor: pointer;">
                    <h3>高级功能</h3>
                    <span id="advancedToggle" style="font-size: 18px; transition: transform 0.3s ease;">▼</span>
                </div>
                <div id="advancedContent" class="advanced-content" style="display: none; margin-top: 15px;">
                    <div class="control-group">
                        <label for="maxWordsPerParagraph">最大段落字数:</label>
                        <input type="range" id="maxWordsPerParagraph" min="30" max="200" step="10" value="50">
                        <span id="maxWordsValue">50</span>
                    </div>
                    <div class="control-group">
                        <label for="forceParagraphBreak">强制分段：</label>
                        <input type="checkbox" id="forceParagraphBreak" checked>
                        <span style="min-width: auto; font-size: 12px;">启用</span>
                    </div>
                    <div class="control-group">
                        <button id="formatTextBtn" style="width: 100px;">格式化文本</button>
                        <button id="undoFormatBtn" style="width: 100px; margin-left: 10px;">撤销格式化</button>
                    </div>
                </div>
            </div>
            
            <div class="panel-section">
                <button id="toggleFullscreen">全屏显示</button>
                <button id="togglePanel">隐藏控制面板</button>
            </div>
            
            <div class="panel-section">
                <h3>进度显示</h3>
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text">
                    <span id="currentLine">1</span> / <span id="totalLines">1</span>
                </div>
                <div class="control-group" style="margin-top: 10px;">
                    <label for="jumpToLine">跳转到:</label>
                    <input type="number" id="jumpToLine" min="1" max="1" value="1" style="width: 60px;">
                    <button id="jumpButton" style="margin: 0; padding: 6px 12px; font-size: 12px;">跳转</button>
                </div>
            </div>
            
            <!-- 版权信息 -->
            <div class="copyright-section">
                <p style="margin: 0; padding: 10px 0; text-align: center; font-size: 12px; color: #666; border-top: 1px solid #eee;">
                    © 2025-Now SuperJia<br> All Rights Reserved<br>版本 v1.2, 发布于2025-09
                </p>
            </div>
        </div>
        
        <!-- 提词器显示区域 -->
        <div class="teleprompter-container" id="teleprompterContainer">
            <div class="teleprompter-content" id="teleprompterContent">
                <div class="text-display" id="textDisplay">
                    <p>请输入您的提词内容，然后点击"格式化文本"按钮开始使用...</p>
                </div>
            </div>
            <div class="reading-guide" id="readingGuide"></div>
            <!-- 悬浮恢复按钮 -->
            <button id="showPanelBtn" class="show-panel-btn" style="display: none;">显示面板</button>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>